<template>
  <view class="vegetable">
    <u-navbar
      title="云上农夫"
      leftIconColor="#f8f8f8"
      :placeholder="true"
      bgColor="#fff"
    >
      <template #left>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            @click="goback"
            class="logo"
            src="/static/zuo1.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
      <template #right>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            class="logo"
            src="/static/start1.jpg"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
          <image
            class="logo"
            src="/static/fx.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
    </u-navbar>
    <view class="hander">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item>
          <view class="swiper-item">
            <image
              src="https://img1.baidu.com/it/u=1314251036,1796718287&fm=253&fmt=auto&app=138&f=JPEG"
              mode=""
              class="baner"
            ></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image
              src="https://img1.baidu.com/it/u=1108061579,3883422493&fm=253&fmt=auto&app=138&f=JPEG"
              mode=""
              class="baner"
            ></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="msg" @click="buyshow = false">
      <h4>共享菜地</h4>
      <!-- 共享菜地 -->
      <view class="vegetableplotbox">
        <view id="vegetableplot">
          <view class="vegetableplot_left">
            <view class="title">须知 购买后可享全托、半托、租赁</view>
          </view>
          <view class="vegetableplot_right">
            <view class="title">半年售</view>
            <view class="title_1">600份</view>
          </view>
        </view>
        <view id="vegetableplot">
          <view class="vegetableplot_left">
            <view class="title">保障 一个月内可享退全款</view>
          </view>
          <view class="vegetableplot_right">
            <view class="title">评价</view>
            <view class="title_1">100条</view>
          </view>
        </view>
      </view>
      <!-- 须知 -->
      <view class="title">
        <view class="title1">购买详情</view>
      </view>
      <view class="shuoming">
        <view class="shuoming_1"> 共享形式(文字说明) </view>
        <view class="shuoming_2">
          付款前，请您仔细阅读该租赁详情！
          该田地可以提供全托、半托或者纯租赁三种形式的租赁形式
          该块菜地仅提供常见蔬果类种植，若您想种植水稻或者其他粮食作物，不好意思，我们没办法满足您的需求，共享付款一个月后无法退款，请见谅哦！
        </view>
      </view>
      <view class="shuoming">
        <view class="shuoming_1"> 地块服务展示 </view>
        <view class="shuoming_2">
          <image
            class="img"
            src="https://img1.baidu.com/it/u=1314251036,1796718287&fm=253&fmt=auto&app=138&f=JPEG"
            mode=""
          >
          </image>
        </view>
      </view>
      <!-- 评价 -->
      <view id="evaluate">
        <view class="title">
          <view class="title1">评价</view>
          <view class="title2" @click="goreview">更多评价</view>
        </view>
        <view class="evaluatemsg">
          <view class="evaluatemsg_content">
            <view
              class="evaluatemsg_content_item"
              v-for="(item, i) in evaluatelist"
              :key="i"
              @click="goreviewdetal(item)"
            >
              <view class="infomsg">
                <image class="img" :src="item.url" mode=""></image>
                <view class="name">{{ item.name }}</view>
                <view class="time">{{ item.time }}</view>
              </view>
              <view class="content">{{ item.content }}</view>
              <view class="imglist">
                <image
                  class="img"
                  :src="itemimg"
                  mode=""
                  :key="i"
                  v-for="(itemimg, i) in item.img"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="gobuy">
      <view class="img1">
        <image
          class="img"
          src="../../static/tabBar/zhuye2.png"
          mode=""
          @click="gomineindex"
        ></image>
        <image
          class="img"
          src="../../static/tabBar/shoucang.png"
          mode=""
        ></image>
        <image
          class="img2"
          src="../../static/tabBar/xiaoxi1.png"
          mode=""
        ></image>
      </view>
      <view class="gocart">加入购物车</view>
      <view class="goshopping" @click="gobuy">立即购买</view>
    </view>
    <view class="show" v-if="buyshow">
      <view class="price">￥299</view>
      <view class="msg">
        <view class="msg_1">共享形式</view>
        <view class="msg_2">
          <view class="msg_3">全托</view>
          <view class="msg_3">半托</view>
          <view class="msg_3">仅租赁</view>
        </view>
        <view class="msg_4">费用说明</view>
        <view class="msg_5">
          1、费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明
          2、费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明
          3、费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 5,
      count1: 5,
      value: 5,
      value1: 5,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      buyshow: false,
      activeItem: "tabOne",
      tabs: [
        {
          name: "tabOne",
          label: "共享菜地",
        },
        {
          name: "tabTwo",
          label: "团购",
        },
        {
          name: "tabThree",
          label: "评价",
        },
      ],
      evaluatelist: [
        {
          id: 1,
          name: "李先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
        {
          id: 2,
          name: "王先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
      ],
    };
  },
  methods: {
    goreview() {
      uni.navigateTo({
        url: "/packageB/productdetails/userevaluation",
      });
    },
    gobuy() {
      this.buyshow = true;
    },
    gogroupbuying() {
      uni.navigateTo({
        url: "/packageB/productdetails/moregroupbuying",
      });
    },
    gomineindex() {
      uni.switchTab({
        url: "/pages/mine/index",
      });
    },
    goreviewdetal() {
      uni.navigateTo({
        url: "/packageB/productdetails/evaluationdetails",
      });
    },
    goback() {
      uni.navigateBack();
    },
    tabClick(item) {
      this.activeItem = item.name;
      // 触发滑动方法
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.vegetable {
  font-family: "Poppins";
  background-color: #f8f8f8;
}

.swiper {
  background-color: #fff;
  height: 300rpx;
}

.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  padding: 0rpx 20rpx;

  .baner {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
  }
}

.msg {
  padding: 20rpx 30rpx;

  h4 {
    margin-bottom: 10rpx;
  }

  .msg_1 {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
}

.vegetableplotbox {
  padding: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

#vegetableplot {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .vegetableplot_left {
    width: 80%;

    // margin-right: 30rpx;
    .title {
      font-size: 30rpx;
      color: #000;
      margin-bottom: 5rpx;
    }
  }

  .vegetableplot_right {
    text-align: center;

    .title {
      font-size: 28rpx;
      color: #000;
    }

    .title_1 {
      color: #8d8683;
      font-size: 26rpx;
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;

  .title1 {
    font-size: 32rpx;
    font-weight: 600;
  }

  .title2 {
    font-size: 30rpx;
    color: #676767;
  }
}

.shuoming {
  background-color: #fff;
  border-radius: 25rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .shuoming_1 {
    font-size: 30rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 10rpx;
  }

  .shuoming_2 {
    font-size: 26rpx;
    color: #adadad;
    line-height: 40rpx;

    .img {
      width: 100%;
      height: 300rpx;
      border-radius: 30rpx;
    }
  }
}

// 评价
#evaluate {
  padding-bottom: 100rpx;

  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;

    .title1 {
      font-size: 32rpx;
      font-weight: 600;
    }

    .title2 {
      font-size: 30rpx;
      color: #676767;
    }
  }
}

.evaluatemsg {
  width: 100%;
  background-color: #fff;
  border-radius: 30rpx;
  padding-bottom: 20rpx;

  .evaluatemsg_content_item {
    padding: 10rpx 30rpx;

    .infomsg {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .name {
        font-size: 28rpx;
        flex: 1;
      }

      .time {
        font-size: 28rpx;
        color: #676767;
      }
    }

    .content {
      font-size: 28rpx;
      color: #676767;
      margin-bottom: 20rpx;
    }

    .imglist {
      display: flex;

      .img {
        width: 140rpx;
        height: 140rpx;
        margin-left: 10rpx;
        border-radius: 10rpx;
      }
    }
  }
}

.gobuy {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 10rpx 0rpx;

  .img {
    width: 50rpx;
    height: 50rpx;
    margin-right: 28rpx;
  }

  .img2 {
    width: 50rpx;
    height: 50rpx;
    margin-right: 15rpx;
  }

  .img1 {
    flex: 1;
    padding-left: 20rpx;
  }

  .gocart {
    width: 200rpx;
    background: #9a9390;
    border-radius: 40rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    padding: 10rpx 20rpx;
    color: #fff;
    margin-right: 10rpx;
  }

  .goshopping {
    width: 200rpx;
    border-radius: 40rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    padding: 10rpx 20rpx;
    color: #fff;
    margin-right: 10rpx;
    background: #eea427;
  }
}

.show {
  width: 100%;
  background-color: #d66e44;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  position: fixed;
  left: 0;
  bottom: 100rpx;
  z-index: 555;

  .price {
    color: #fff;
    padding: 20rpx 20rpx;
    font-size: 36rpx;
  }

  .msg {
    background-color: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
  }

  .msg_1 {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
  }

  .msg_2 {
    display: flex;
    margin-bottom: 15rpx;

    .msg_3 {
      border: 1px solid #bbbbbb;
      margin-right: 20rpx;
      padding: 5rpx 20rpx;
      border-radius: 15rpx;
      background-color: #eaebec;
      color: #000;
    }
  }

  .msg_4 {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
  }

  .msg_5 {
    font-size: 30rpx;
    padding: 0rpx 20rpx;
  }
}
</style>